import React, { useState ,useEffect} from 'react'
import { Space, Table, Tag, Button, Modal ,Select ,Radio ,Form,Input} from 'antd';
import { AudioOutlined ,ExclamationCircleOutlined } from '@ant-design/icons';


export default function List(props) {
    const { Column } = Table;
    const { Search } = Input;
    const { confirm } = Modal;
    const { Option } = Select;
    const [form] = Form.useForm();
    const [updateform] = Form.useForm();


    const [_id,setid] = useState('')
    const [updateObj,setUpdateObj] = useState({})
    const [type,setType] = useState('')

    //搜索
    const onSearch = (value) => {
        props.toSearch(type,value)
    };
    const handleChange = value => setType(value)
    //增加
    const handleAdd = () => {
        setIsModalOpen(true);
    }
    const handleOk = () => {
        props.toAdd(form.getFieldsValue());
        setIsModalOpen(false);
    };
    const handleCancel = () => {
        setIsModalOpen(false);
    };
    //修改
    useEffect(() => {
        updateform.setFieldsValue(updateObj)
    },[updateObj._id])
    
    const handleUpdate =  (record) => {
        setUpdateObj(record)
        setIsUpdateOpen(true);
    }
    const updateOk = () => {
        const newObj = updateform.getFieldsValue()
        props.toUpdate({...newObj,_id:updateObj._id});
        setIsUpdateOpen(false);
    };
    const updateCancel = () => {
        setIsUpdateOpen(false);
    };
    //删除
    const handleDelete = (_id) => {
        confirm({
            title: '删除',
            icon: <ExclamationCircleOutlined />,
            content: '确定删除该学生的信息吗?',
            onOk() {
              props.toDelete(_id)
            }
          });
    }
    //分页
    const changePage = (pagination) => {
        props.getPagination(pagination.current,pagination.pageSize)
    }


    const [isModalOpen, setIsModalOpen] = useState(false);
    const [isUpdateOpen, setIsUpdateOpen] = useState(false);

    return (
        <>
            <Button type="primary" onClick={handleAdd}>添加学生</Button>
            <Modal title="添加学生" open={isModalOpen} onOk={handleOk} 
            onCancel={handleCancel} okText='确认' cancelText='取消' destroyOnClose={true}>
                <Form
                form={form}
                name="addForm"
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 20 }}
                autoComplete="off"
                >
                    <Form.Item
                        label="姓名"
                        name="name"
                        rules={[{ required: true, message: '请输入添加学生名字!' }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="年龄"
                        name="age"
                        rules={[{ required: true, message: '请输入添加学生年龄!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="性别"
                        name="gender"
                        rules={[{ required: true, message: '请输入添加学生年龄!' }]}
                    >
                         <Radio.Group >
                            <Radio value='male'>男</Radio>
                            <Radio value='female'>女</Radio>
                        </Radio.Group>
                    </Form.Item>
                </Form>
            </Modal>
            <Modal title="修改学生" open={isUpdateOpen} onOk={updateOk}  forceRender={true}
            onCancel={updateCancel} okText='确认' cancelText='取消' destroyOnClose={true}>
                <Form
                form={updateform}
                name="addForm"
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 20 }}
                autoComplete="off"
                >
                    <Form.Item
                        label="姓名"
                        name="name"
                        rules={[{ required: true, message: '请输入添加学生名字!' }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="年龄"
                        name="age"
                        rules={[{ required: true, message: '请输入添加学生年龄!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="性别"
                        name="gender"
                        rules={[{ required: true, message: '请输入添加学生年龄!' }]}
                    >
                         <Radio.Group >
                            <Radio value='male'>男</Radio>
                            <Radio value='female'>女</Radio>
                        </Radio.Group>
                    </Form.Item>
                </Form>
            </Modal>
            <Select
                defaultValue="全部"
                style={{width: 100,}}
                onChange={handleChange}
                >
                <Option value="all">全部</Option>
                <Option value="name">姓名</Option>
                <Option value="age">年龄</Option>
                <Option value="gender">性别</Option>
            </Select>
            <Search
                placeholder="请输入您要搜索的内容..."
                allowClear
                onSearch={onSearch}
                style={{
                    width: 280,
                }}
            />
            <Table dataSource={props.stuArr} rowKey="_id"  width='500' 
            pagination={props.pagination} onChange={changePage}>
                <Column title="姓名" dataIndex="name" align='center' />
                <Column title="年龄" dataIndex="age" align='center' />
                <Column title="性别" dataIndex="gender" align='center' />
                <Column
                    title="操作"
                    align='center'
                    key="action"
                    render={(_, record) => (
                        <Space size="middle">
                            <Button type="primary" onClick={() => handleUpdate(record)}>修改</Button>
                            <Button type="primary" danger onClick={() => handleDelete(record._id)}>
                                删除
                            </Button>
                        </Space>
                    )}
                />
            </Table>
        </>
    )
}
